<template>
  <el-input
    v-model="inputValue"
    :placeholder="component.props.placeholder"
    :type="component.props.type"
    :disabled="component.props.disabled"
    :clearable="component.props.clearable"
    :readonly="!isEditorMode"
    :size="component.props.size"
    :style="getStyles()"
  ></el-input>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  component: Object,
})

const editorMode = inject('editorMode', false)
// 计算当前是否处于编辑器模式
const isEditorMode = computed(() => {
  return editorMode === true
})


const inputValue = ref('')

// 监听组件变化
watch(
  () => props.component,
  () => {
    if (props.component && props.component.props) {
      inputValue.value = props.component.props.value || ''
    }
  },
  { immediate: true, deep: true },
)

// 获取组件样式
const getStyles = () => {
  if (!props.component || !props.component.style) return {}
  return props.component.style
}
</script>
